<template>
  <div class="page-container flex-column-center">

    <div class="page-info-title">
      <p class="o7">价值和高度</p>
      <p class="big">借阅文献价值</p>
      <p class="o5">借阅文献累计高度</p>
    </div>

    <div class="page-main-box">
      <div class="page-opacity-box">
        <img class="d3" src="@/assets/images/d3.png" />
        <img class="d2" src="@/assets/images/d2.png" />
        <div class="chi"></div>
        <div class="pay-text">
          <img src="@/assets/images/b6.png" />
          <span class="m6">{{ price }}</span>
          <span>{{ height }}cm</span>
        </div>
      </div>
    </div>

    <img class="page-bg-title" src="@/assets/images/t2.png" />

  </div>
</template>
<script>

export default {
  name: 'pagePrice',
  props: ['reportData'],
  data () {
    return {
      price: 0,
      height: 0
    }
  },
  watch: {
    reportData: {
      immediate: true,
      handler (val) {
        if (val) {
          const d = JSON.parse(val.data5)
          this.price = d.priceNum
          this.height = (d.pageNum / 100 * 0.8).toFixed(0)
        }
      }
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>
<style lang="scss" scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
  background: url('~@/assets/images/bg.png') no-repeat left top,
  linear-gradient(to top, #e2542c 0%, #e88879 50%, #e88879 85%, #e2542c 100%);
  background-size: 100%;
}
.page-opacity-box {
  border-radius: 30px;
  overflow: hidden;
}
.d3 {
  width: 780px;
  height: 872px;
  position: absolute;
  left: 0;
  top: 0;
}
.d2 {
  width: 264px;
  height: 664px;
  position: absolute;
  right: 152px;
  bottom: 6px;
}
.chi {
  width: 53px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: url('~@/assets/images/b8.png') repeat;
  background-size: 53px 80px;
}
.pay-text {
  width: 471px;
  font-size: 52px;
  color: #e2542c;
  padding-bottom: 18px;
  display: flex;
  align-items: center;
  background: url('~@/assets/images/b7.png') no-repeat left bottom;
  background-size: 100% 18px;
  position: absolute;
  right: 60px;
  bottom: 675px;
  img {
    width: 64px;
    height: 52px;
    margin-right: 20px;
  }
  .m6 {
    margin-right: 50px;
  }
}
</style>
